<template>
  <div class="tech-panel">
    <!-- 状态区 -->
    <section class="section status-section">
      <div class="status-left">
        <div class="status-item">
          ⚙️ 通讯状态：
          <span :class="['status-value', getCommStatusClass]">{{
            commStatus
          }}</span>
        </div>
        <div class="status-item">
          ⚙️ 运行状态：
          <span :class="['status-value', getRunStatusClass]">{{
            runStatus
          }}</span>
        </div>
      </div>
      <div class="status-right">
        <div class="status-line">
          皮带速度：<span class="value">{{ beltSpeed }} m/s</span>
        </div>
        
        <div class="status-line">
          速度设定：
          <input
            type="number"
            v-model.number="multiSpeedInput"
            class="input"
            min="0"
            step="1"
            @input="validateInteger"
          />
          <span class="unit"> %</span>
        </div>
      </div>
    </section>

    <!-- 华宁控制方式 -->
    <section class="section mode-section">
      <div class="section-title">华宁控制方式</div>
      <div class="mode-buttons">
        <div
          v-for="item in ['集控', '就地', '检修']"
          :key="item"
          :class="['mode-btn', huaningControlStatus[item] ? 'active' : 'inactive']"
        >
          {{ item }}
        </div>
      </div>
    </section>

    <!-- 皮带控制方式 -->
    <section class="section mode-section">
      <div class="section-title">皮带控制方式</div>
      <div class="mode-buttons">
        <div
          v-for="item in [ '就地', '远程', '单起']"
          :key="item"
          :class="['mode-btn', beltControlStatus[item] ? 'active' : 'inactive']"
        >
          {{ item }}
        </div>
      </div>
    </section>

    <!-- 联锁控制状态 -->
    <section class="section lock-switch-section">
      <div class="lock-switch-left">
        <div class="lock-item">
          当前状态：
          <span
            :class="['status-dot', lockStatus === 0 ? 'grey' : 'green']"
          ></span>
          <span class="lock-text">{{
            lockStatus === 0 ? "解锁" : "联锁"
          }}</span>
        </div>
      </div>
      <div class="lock-switch-right">
        <button class="glow-btn small" @click="toggleLockStatus">
          {{ lockStatus === 0 ? "切换至联锁" : "切换至解锁" }}
        </button>
      </div>
    </section>
    <!-- 操作按钮 -->
    <section class="section button-section">
      <button class="glow-btn" @click="start">启动</button>
      <button class="glow-btn" @click="stop">停止</button>
      <button class="glow-btn danger" @click="reset">故障复位</button>
    </section>
    <section class="section button-section">
    <button class="glow-btn" @click="coldstart1">1#冷却单启</button>
      <button class="glow-btn" @click="coldstop1">1#冷却单停</button>
      <button class="glow-btn" @click="coldstart2">2#冷却单启</button>
      <button class="glow-btn" @click="coldstop2">2#冷却单停</button>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { act, sendDataFromButton } from "../../../utils/websocket";
import Belt101 from "../../svgEditing/elements/Belt/Belt101.vue";
// 状态区
const commStatus = ref<"正常" | "断开">("正常");
const runStatus = ref<"运行" | "停止">("运行");

const getCommStatusClass = computed(() =>
  commStatus.value === "正常" ? "green" : "red"
);

const getRunStatusClass = computed(() =>
  runStatus.value === "运行" ? "green" : "gray"
);
// 数值区
const beltSpeed = ref(1.2);
const multiSpeedDisplay = ref(30);
const multiSpeedInput = ref(30);

// 模拟状态展示（可同时亮起）
const HNjk =true;
const HNjd=false;
const HNjx=false;
const huaningControlStatus = computed(() =>({ 集控: HNjk, 就地: HNjd, 检修: HNjx }));

const Beltjk =true;
const Beltjd=false;
const Beltjx=false;
const beltControlStatus = computed(() =>({  就地: Beltjd, 远程: Beltjx, 闭锁: act.run }));



const validateInteger = () => {
  if (!Number.isInteger(multiSpeedInput.value)) {
    multiSpeedInput.value = Math.round(multiSpeedInput.value);
  }
};


const lockStatus = ref<0 | 1>(0); // 0 = 解锁，1 = 联锁

const toggleLockStatus = () => {
  lockStatus.value = lockStatus.value === 0 ? 1 : 0;
};


const reset = () => console.log("故障复位");
const start = () => console.log("启动");
const stop = () => console.log("停止");

const coldstart1 = () => console.log("1#冷却单启");
const coldstart2 = () => console.log("2#冷却单启");
const coldstop1 = () => console.log("1#冷却单停");
const coldstop2 = () => console.log("2#冷却单停");
</script>

<style scoped>
.tech-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding: 2em;
  background: rgba(0, 10, 20, 0.6);
  border: 2px solid #0ff;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  color: #0ff;
  font-family: "Orbitron", "Arial", sans-serif;
  box-shadow: 0 0 12px #0ff4;
}

.section {
  border: 1px solid #0ff4;
  border-radius: 12px;
  padding: 1em 1.5em;
  background: rgba(0, 20, 40, 0.3);
  box-shadow: inset 0 0 10px #0ff2;
}

/* 状态区 */
.status-section {
  display: flex;
  justify-content: space-between;
  gap: 2em;
}
.status-left {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.status-item {
  white-space: nowrap;
  font-weight: bold;
  font-size: 1em;
}
.status-right {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.status-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.input {
  background: transparent;
  border: 1px solid #0ff;
  color: #0ff;
  padding: 0.3em 0.5em;
  border-radius: 6px;
  width: 80px;
}
.unit {
  color: #999;
}
.status-value.green { color: #0f0; }
.status-value.red   { color: #f33; }
.status-value.gray  { color: #999; }

/* 控制方式显示 */
.mode-buttons {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: 0.5em;
}
.mode-btn {
  padding: 0.5em 1.2em;
  border-radius: 8px;
  font-weight: bold;
  min-width: 70px;
  text-align: center;
  transition: all 0.3s;
}
.mode-btn.active {
  background-color: rgba(0, 255, 170, 0.2);
  border: 1px solid #0ff;
  color: #0ff;
}
.mode-btn.inactive {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #555;
  color: #888;
}
/* 联锁切换区 */
.lock-switch-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  padding: 1em 1.5em;
  border: 1px solid #0ff4;
  border-radius: 12px;
  background: rgba(0, 20, 40, 0.3);
  box-shadow: inset 0 0 10px #0ff2;
}

.lock-switch-left {
  display: flex;
  align-items: center;
  gap: 1em;
}

.lock-item {
  font-weight: bold;
  font-size: 1em;
  white-space: nowrap;
}

.lock-text {
  margin-left: 0.5em;
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 0.5em;
  box-shadow: 0 0 6px currentColor;
}

.status-dot.green {
  background-color: #0f0;
  color: #0f0;
}

.status-dot.grey {
  background-color: rgb(111, 134, 141);
  color: rgb(85, 131, 140);
}
/* 操作按钮 */
.button-section {
  display: flex;
  gap: 1em;
  justify-content: center;
}
.glow-btn {
  padding: 0.7em 1.5em;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid #0ff;
  color: #0ff;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 8px #0ff4;
  transition: all 0.2s;
}
.glow-btn:hover {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 16px #0ff;
}
.glow-btn.danger {
  border-color: #f00;
  color: #f00;
}
.glow-btn.danger:hover {
  background: #f00;
  color: #000;
  box-shadow: 0 0 16px #f00;
}
</style>
